<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影信息修改页面</title>
    <link href="../../static/jquery-easyui-1.3.3/themes/default/easyui.css" th:href="@{/static/jquery-easyui-1.3.3/themes/default/easyui.css}" rel="stylesheet" type="text/css"/>
    <link href="../../static/jquery-easyui-1.3.3/themes/icon.css" th:href="@{/static/jquery-easyui-1.3.3/themes/icon.css}" rel="stylesheet" type="text/css"/>
    <script src="../../static/jquery-easyui-1.3.3/jquery.min.js" th:src="@{/static/jquery-easyui-1.3.3/jquery.min.js}" type="text/javascript"></script>
    <script src="../../static/jquery-easyui-1.3.3/jquery.easyui.min.js" th:src="@{/static/jquery-easyui-1.3.3/jquery.easyui.min.js}" type="text/javascript"></script>
    <script src="../../static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" th:src="@{/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js}" type="text/javascript"></script>
    <script src="../../static/ckeditor/ckeditor.js" th:src="@{/static/ckeditor/ckeditor.js}" type="text/javascript"></script>
    <script>
        // 提交表单数据
        function submitData() {
            $('#fm').form('submit', {
                url: '/admin/movie/save',
                onSubmit: function () {
                    // 获取内容输入框中文本
                    var content = CKEDITOR.instances.content.getData();
                    if (content === '') {
                        $.messager.alert('系统提示', '输入内容不能为空！');
                        return false;
                    }
                    // 验证当前表单字段，如果都通过则提交表单
                    return $(this).form('validate');
                },
                success: function (result) {
                    var res = eval('(' + result + ')');
                    if (res.success) {
                        $.messager.alert('系统提示', '保存成功');
                        // 获取电影信息，并设置到页面上
                        getMovieData();
                    } else {
                        $.messager.alert('系统提示', '保存失败');
                    }
                }
            });
        }

        // 重置所有输入框的值
        function resetValue() {
            $('#name').val('');
            $('#title').val('');
            $('#imageFile').val('');
            $('#no').prop('checked', true);
            CKEDITOR.instances.content.setData('');
        }

        // 获取电影信息，并设置到页面上
        function getMovieData() {
            // 查询id对应电影的信息填充到页面上
            $.post('/admin/movie/findById',
                { id: window.movdifyMovieId },
                function (result) {
                    $('#id').val(result.id);
                    $('#name').val(result.name);
                    $('#title').val(result.title);
                    $('#imageName').val(result.imageName);

                    if (result.hot === 1) {
                        $('#yes').prop('checked', true);
                    } else {
                        $('#no').prop('checked', true);
                    }

                    // 将电影介绍填充到页面
                    CKEDITOR.instances.content.setData(result.content);
                },
                'json'
            );
        }
    </script>
</head>

<body style="margin: 10px;">

<div id="p" class="easyui-panel" title="修改电影" style="padding: 10px">
    <form id="fm" method="post" enctype="multipart/form-data">
        <table cellspacing="20px">
            <tr>
                <td width="80px">电影名称：</td>
                <td>
                    <input type="text" id="name" name="name" style="width: 400px;" class="easyui-validatebox" required="required">
                </td>
            </tr>
            <tr>
                <td width="80px">标题：</td>
                <td>
                    <input type="text" id="title" name="title" style="width: 400px;" class="easyui-validatebox" required="required">
                </td>
            </tr>
            <tr>
                <td width="80px">电影图片：</td>
                <td>
                    <input type="hidden" id="imageName" name="imageName">
                    <input type="file" id="imageFile" name="imageFile">
                </td>
            </tr>
            <tr>
                <td width="80px">设置热门：</td>
                <td>
                    <input type="radio" id="yes" value="1" name="hot">是&nbsp;
                    <input type="radio" id="no" value="0" name="hot" checked="checked">否
                </td>
            </tr>
            <tr>
                <td valign="top">内容：</td>
                <td>
                    <textarea name="content" id="content" cols="80" rows="30"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="hidden" id="id" name="id">
                    <a href="javascript:submitData()" class="easyui-linkbutton" data-options="iconCls:'icon-submit'">
                        发布
                    </a>
                </td>
            </tr>
        </table>
    </form>
</div>

<script>
    // 可见即所得编辑框替换内容输入框
    CKEDITOR.replace('content');

    // 获取地址栏中的查询参数
    function getQueryString(name) {
        // 匹配&name=value(&)形式的正则
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        // 编码地址栏的网址
        var url = decodeURI(window.location.search);
        // 匹配正则
        var result = url.substr(1).match(reg);
        if (result) {
            // 解码网址
            return unescape(result[2]);
        }
        return null;
    }

    // 获取地址栏中的查询参数id
    window.movdifyMovieId = getQueryString('id');
    // 获取电影信息，并设置到页面上
    getMovieData();


</script>

</body>

</html>